<template>
  <div style="width: 100%; height: 100%">
    <Echarts :key="1" v-if="MonitorTypeId === 1 || MonitorTypeId === 2 || MonitorTypeId === 5" class="echarts-box" :options="options" />
    <Echarts :key="2" v-if="MonitorTypeId === 3" class="echarts-box" :options="options1" />
    <Echarts :key="3" v-if="MonitorTypeId === 4" class="echarts-box" :options="options2" />
    <Echarts :key="4" v-if="MonitorTypeId === 6" class="echarts-box" :options="options3" />
  </div>
</template>

<script>
import Echarts from "../../../../component/ECharts";

export default {
  name: "TwiceLine",

  components:{
    Echarts
  },

  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    MonitorTypeId: {
      type: Number,
    },
    firstLevel: {
      type: [Number, String],
    },
    secondLevel: {
      type: [Number, String],
    },
    thirdLevel: {
      type: [Number, String],
    },
  },

  computed: {
    options() {
      return {
        color: ["#00FFFF"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "8%",
          bottom: "24%",
          left: "6%",
          right: "9%",
          containLabel: false,
        },
        legend: {
          show: true,
          top: 0,
          right: 12,
          itemWidth: 24,
          itemHeight: 10,
          itemGap: 24,
          icon: "roundRect",
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)",
          },
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 167, 255, 0.36)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "#C1C3CA",
          },
          data: this.data ? this.data.map((item) => item.theDate) : [],
        },
        yAxis: [
          {
            max: Math.round(Math.max(this.data ? this.data[0].data : [], this.firstLevel, this.secondLevel) * 1.2),
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: "dashed",
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 167, 255, 0.36)",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#C1C3CA",
            },
          },
        ],
        series: [
          {
            name: "测点数据",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#08FAFE",
            },
            // 基准线
            markLine: {
              symbol: 'none',
              data: [
                {
                  yAxis: this.firstLevel,
                  name: '第一警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'red',
                  },
                  label: {
                    position: "right",
                    fontSize: 12,
                    formatter: "第一警戒线 " + this.firstLevel,
                  }
                },
                {
                  yAxis: this.secondLevel,
                  name: '第二警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'orange'
                  },
                  label: {
                    position: "middle",
                    fontSize: 12,
                    formatter: "第二警戒线 " + this.secondLevel,
                  }
                },
              ].filter(item=>item.yAxis)
            },
            data: this.data ? this.data.map((item) => item.data ? item.data.toFixed(2) : 0) : [],
          },
        ],
      };
    },
    options1() {
      return {
        color: ["#00FFFF", "#1E90FF", "#00FF7F", "#FAFAD2"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "10%",
          bottom: "24%",
          left: "8%",
          right: "9%",
          containLabel: false,
        },
        legend: {
          show: true,
          top: 0,
          right: 12,
          itemWidth: 24,
          itemHeight: 10,
          itemGap: 24,
          icon: "roundRect",
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)",
          },
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 167, 255, 0.36)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "#C1C3CA",
          },
          data: this.data ? this.data.map((item) => item.theDate) : [],
        },
        yAxis: [
          {
            // max: Math.round(Math.max(this.data[0].totalH, this.data[0].totalP, this.data[0].totalX, this.data[0].totalY, this.firstLevel, this.secondLevel, this.thirdLevel) * 1.2),
            max:  300,
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: "dashed",
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 167, 255, 0.36)",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#C1C3CA",
            },
          },
        ],
        series: [
          {
            name: "X方向变量",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#08FAFE",
            },
            // 基准线
            markLine: {
              symbol: 'none',
              data: [
                {
                  yAxis: this.firstLevel,
                  name: '第一警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'red',
                  },
                  label: {
                    position: "right",
                    fontSize: 12,
                    formatter: "第一警戒线 " + this.firstLevel,
                  }
                },
                {
                  yAxis: this.secondLevel,
                  name: '第二警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'orange'
                  },
                  label: {
                    position: "middle",
                    fontSize: 12,
                    formatter: "第二警戒线 " + this.secondLevel,
                  }
                },
                {
                  yAxis: this.thirdLevel,
                  name: '第三警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'yellow'
                  },
                  label: {
                    position: "start",
                    fontSize: 12,
                    formatter: "第三警戒线 " + this.thirdLevel,
                  }
                },
              ].filter(item=>item.yAxis)
            },
            data: this.data ? this.data.map((item) => item.totalX ? item.totalX.toFixed(2) : '') : [],
          },
          {
            name: "Y方向变量",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#1E90FF",
            },
            data: this.data ? this.data.map((item) => item.totalY ? item.totalY.toFixed(2) : '') : [],
          },
          {
            name: "H方向变量",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#00FF7F",
            },
            data: this.data ? this.data.map((item) => item.totalH ? item.totalH.toFixed(2) : '') : [],
          },
          {
            name: "P方向变量",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#FAFAD2",
            },
            data: this.data ? this.data.map((item) => item.totalP ? item.totalP.toFixed(2) : '') : [],
          },
        ],
      };
    },
    options2() {
      return {
        color: ["#00FFFF", "#1E90FF", "#00ff7f"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "10%",
          bottom: "24%",
          left: "6%",
          right: "9%",
          containLabel: false,
        },
        legend: {
          show: true,
          top: 0,
          right: 12,
          itemWidth: 24,
          itemHeight: 10,
          itemGap: 24,
          icon: "roundRect",
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)",
          },
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 167, 255, 0.36)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "#C1C3CA",
          },
          data: this.data ? this.data.map((item) => item.theDate) : [],
        },
        yAxis: [
          {
            max: Math.round(Math.max(this.data[0].dataList[0].xdata, this.data[0].dataList[0].ydata, this.firstLevel, this.secondLevel, this.thirdLevel) * 1.2),
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: "dashed",
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 167, 255, 0.36)",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#C1C3CA",
            },
          },
        ],
        series: [
          {
            name: "N2-1-3",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#08FAFE",
            },
            // 基准线
            markLine: {
              symbol: 'none',
              data: [
                {
                  yAxis: this.firstLevel,
                  name: '第一警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'red',
                  },
                  label: {
                    position: "right",
                    fontSize: 12,
                    formatter: "第一警戒线 " + this.firstLevel,
                  }
                },
                {
                  yAxis: this.secondLevel,
                  name: '第二警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'orange'
                  },
                  label: {
                    position: "middle",
                    fontSize: 12,
                    formatter: "第二警戒线 " + this.secondLevel,
                  }
                },
                {
                  yAxis: this.thirdLevel,
                  name: '第三警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'yellow'
                  },
                  label: {
                    position: "start",
                    fontSize: 12,
                    formatter: "第三警戒线 " + this.thirdLevel,
                  }
                },
              ].filter(item=>item.yAxis)
            },
            data: this.data ? this.data.map((item) => item.dataList[0].xdata ? item.dataList[0].xdata.toFixed(2) : '') : [],
          },
          {
            name: "N2-1-2",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#1E90FF",
            },
            data: this.data ? this.data.map((item) => item.dataList[1].xdata ? item.dataList[1].xdata.toFixed(2) : '') : [],
          },
          {
            name: "N2-1-1",
                type: "line",
              symbol: "none",
              lineStyle: {
            width: 2,
                color: "#1E90FF",
          },
            data: this.data ? this.data.map((item) => item.dataList[2].xdata ? item.dataList[2].xdata.toFixed(2) : '') : [],
          },
        ],
      };
    },
    options3() {
      return {
        color: ["#00FFFF"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "8%",
          bottom: "24%",
          left: "7%",
          right: "9%",
          containLabel: false,
        },
        legend: {
          show: true,
          top: 0,
          right: 12,
          itemWidth: 24,
          itemHeight: 10,
          itemGap: 24,
          icon: "roundRect",
          textStyle: {
            color: "rgba(255, 255, 255, 0.6)",
          },
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 167, 255, 0.36)",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            color: "#C1C3CA",
          },
          data: this.data ? this.data.map((item) => item.theDate) : [],
        },
        yAxis: [
          {
            // max: Math.round(Math.max(this.data[0].data, this.firstLevel, this.secondLevel, this.thirdLevel) * 3),
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                type: "dashed",
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 167, 255, 0.36)",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#C1C3CA",
            },
          },
        ],
        series: [
          {
            name: "测点数据",
            type: "line",
            symbol: "none",
            lineStyle: {
              width: 2,
              color: "#08FAFE",
            },
            // 基准线
            markLine: {
              symbol: 'none',
              data: [
                {
                  yAxis: this.firstLevel || 0,
                  name: '第一警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'red',
                  },
                  label: {
                    position: "right",
                    fontSize: 12,
                    formatter: "第一警戒线 " + (this.firstLevel || undefined),
                  }
                },
                {
                  yAxis: this.secondLevel,
                  name: '第二警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'orange'
                  },
                  label: {
                    position: "middle",
                    fontSize: 12,
                    formatter: "第二警戒线 " + this.secondLevel,
                  }
                },
                {
                  yAxis: this.secondLevel,
                  name: '第三警戒线',
                  lineStyle: {
                    type: "solid",
                    color: 'yellow'
                  },
                  label: {
                    position: "start",
                    fontSize: 12,
                    formatter: "第三警戒线 " + this.thirdLevel,
                  }
                },
              ].filter(item=>item.yAxis)
            },
            data: this.data ? this.data.map((item) => item.data ? item.data.toFixed(2) : '') : [],
          },
        ],
      };
    },
  },
}
</script>

<style lang="scss" scoped>
.echarts-box{
  width: 100%;
  height: 100%;
}
</style>
